<template>
    <div class="web-example">
        <div class="web-example-header">
            <div class="header-left">
                <h3>{{title}}</h3>
                <slot name="header-left"></slot>
            </div>
            <div class="header-right">
                <slot name="header-right"></slot>
            </div>
        </div>
        <div class="web-example-content">
            <slot></slot>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'm-example',
        props: {
            title: {
                type: String,
                required: true
            }
        }
    }
</script>

<style lang="less" scoped>
    @import "../assets/less/Var.less";

    .web-example {
        border-radius: 7px;
        background-color: white;
        border: 1px solid @border-color;
        padding: 0px 15px;
        transition: all 0.4s;
        .web-example-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0px;
            border-bottom: 1px dashed @border-color;
            .header-left {
                display: flex;
                flex-grow: 0;
                h3{
                    padding-right:20px;
                    white-space:nowrap;
                }
            }
            .header-right {
                flex-grow: 0;
            }
        }
        .web-example-content {
            padding: 25px 0px;
        }
        &:hover {
            box-shadow: 0 2px 7px rgba(0, 0, 0, .15);
            border-color: transparent;
        }
        &:not(:last-child) {
            margin-bottom: 20px;
        }
    }
</style>